<template lang="pug">
.table-model-w
    el-table(
        ref="multipleTable"
        :columns="columns"
        :stripe="stripe"
        class="mytable"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :height="height"
        :border="border"
        :show-summary="showSummary"
        :span-method="spanMethod"
        :summary-method="summaryMethod"
        :expand-row-keys="expandRowKeys"
        style="width: 100%"
        :header-cell-style="{'text-align':'center'}"
        :header-cell-class-name="headerCellClassName"
        :fit="true"
        :data="data"
        :default-expand-all="defaultExpandAll"
        :scrollbar-always-on="true"
        highlight-current-row
        :row-class-name="tableRowClassName"
        :cell-class-name="tableCellClassName"
        @selection-change="handleSelectionChange"
        @select-all="handleSelectAllChange"
        @select="handleSelectChange"
        @row-click="handleRowClick"
        :size="size"
        :lazy="lazy"
        :load="load"
        :empty-text="emptyText || '暂无数据'"
        )
        el-table-column(type="selection" v-if="selection" width="60" align="center" :resizable="false" :selectable="selectable")
        el-table-column(label="序号" v-if="index" width="60" :formatter="indexFormatter" align="center" :fixed="indexFixed" :resizable="false")
        slot
    paginationModel(
        v-if="pagination"
        :pageSizes="pageSizes"
        :pagerCount="pagerCount"
        :layout="layout"
        :page="page"
        @pageChage="pageChage"
    )
</template>

<script  setup lang="ts">
import { ref } from 'vue'
import paginationModel from './paginationModel.vue'
const props = defineProps({
    size: {
        type: String,
        default: ''
    },
    selectable: {
        type: Function,
        default: function(){
            return true
        }
    },
    expandRowKeys: {
        type: Array,
        default: function(){
            return []
        }
    },
    stripe: { //斑马线
        type: Boolean,
        default: true
    },
    lazy: {
        type: Boolean,
        default: false
    },
    load: {
        type: Function,
        default: function(){
            return
        }
    },
    pagination: {
        type: Boolean,
        default: true
    },
    defaultExpandAll: {
        type: Boolean,
        default: false
    },
    pageSizes: {
        type: Array,
        default: function(){
            return [10, 15, 20, 50]
        }
    },
    pagerCount: {
        type: Number,
        default: 7
    },
    layout: { // 要展示的内容
        type: String,
        default: 'total, sizes, prev, pager, next'
    },
    page: { //当前页，总数
        type: Object,
        default: function(){
            return {
                total: 0,
                pageSize: 20,
                currentPage: 1
            }
        }
    },
    data: {
        type: Array,
        default: function(){
            return []
        }
    },
    index: {
        type: Boolean,
        default: true
    },
    indexFixed: {
        type: Boolean,
        default: false
    },
    height: {
        type: String,
        default: '100%'
    },
    border: {
        type: Boolean,
        default: true
    },
    showSummary: {
        type: Boolean,
        default: false
    },
    columns: {
        type: Array,
        default: function(){
            return []
        }
    },
    summaryMethod: {
        type: Function,
        default: function(){
            return
        }
    },
    selection: {
        type: Boolean,
        default: false
    },
    emptyText: {
        type: String,
        default: ''
    },
    tableRowClassName: {
        type: Function,
        default: function(){
            return
        }
    },
    tableCellClassName: {
        type: Function,
        default: function(){
            return
        }
    },
    headerCellClassName: {
        type: Function,
        default: function(){
            return
        }
    },
    spanMethod: {
        type: Function,
        default: function(){
            return
        }
    }
})

const indexFormatter = (row, column, cellValue, index)=>{
    if (props.page && props.page.pageSize){
        return props.page.pageSize * (props.page.currentPage - 1) + index + 1
    }
    return index + 1
}
const emit = defineEmits(['select', 'selection-change', 'select-all', 'row-click', 'pageChage'])
const pageChage = (currentPage) => {
    emit('pageChage', currentPage)
}
const handleSelectChange = (rows, row)=>{
    emit('select', rows, row)
}
const handleSelectionChange = (val)=>{
    emit('selection-change', val)
}
const handleSelectAllChange = (val)=>{
    emit('select-all', val)
}
const handleRowClick = (row, column, event)=>{
    emit('row-click', { row, column, event })
}
const multipleTable = ref()
const clearSelection = () => {
    multipleTable.value.clearSelection()
}
const toggleRowSelection = (row, se) => {
    multipleTable.value.toggleRowSelection(row, se)
}
const setCurrentRow = (row) => {
    multipleTable.value.setCurrentRow(row)
}
defineExpose({
    clearSelection,
    toggleRowSelection,
    setCurrentRow
})
</script>

<style lang="less">
.table-model-w{
    border-radius: 5px;
    padding: 2px 10px 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
</style>